<template>
    <div class="label-select">
        <div class="label-style">{{labelName}}</div>
        <div class="select-style">
            <a-select :placeholder="placeholder" v-model:value="selectedValue" size="middle"
                :style="'min-width:' + inputWidth +'vw;'" :options="selectOptions"
                @change="handleChange" allowClear :disabled="isDisabled" >
            </a-select>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'labelSelect'
}
</script>
<script lang="ts" setup>
import {reactive, ref, toRef} from 'vue';

const props = defineProps({
    labelName: String,
    selectedValue: {},
    selectOptions: Array,
    placeholder: String,
    inputWidth: {
        type: Number,
        default: 8
    },
    isDisabled: {
        type: Boolean,
        default: false
    }
});

const emits = defineEmits(['update:selectedValue','selectedChangeFunc']);

const handleChange = (value: any) => {
  emits('update:selectedValue', value);
  emits("selectedChangeFunc", value)
}
</script>
<style lang="less" scoped>
.label-select {
    height: 32px; // 默认输入框高度为32px
    display: flex;
    align-items: center;

    .select-style {
        margin-left: 10px;
    }
    //:deep(.ant-select-selector) {
    //    text-align: left;
    //    border-radius: 5px;
    //}
}
</style>